<template>
	<view class="main">
		<view class="top_tip" v-if="tipText">{{ tipText }}</view>
		<u-sticky>
			<RenCalendar @onDayClick="onDayClick" @changeMonth="changeMonth" :open="false"></RenCalendar>
		</u-sticky>
		<view class="list_box" :style="{
        height: tipText ? 'calc(100vh - 204rpx)' : 'calc(100vh - 228rpx)',
      }">
			<scroll-view :style="{
          height: tipText ? 'calc(100vh - 204rpx)' : 'calc(100vh - 228rpx)',
        }" v-if="dataList.length > 0" scroll-y="true" @scrolltolower="nextPage" :lower-threshold="150">
				<view class="data_item" v-for="(item, index) in dataList" :key="index" @click="selectOne(item)">
					<view class="operaion_btn" @click.stop="operaion(item)"> 操作 </view>
					<view class="header_box d-flex a-center">
						<image src="https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/backlog/class_0.png"
							class="item_icon" />
						<view class="item_address text-nowrap2">{{ item.address }}</view>
					</view>
					<view class="d-flex">
						<view class="gray_text"> 总面积：{{ item.totalArea }} </view>
						<view class="gray_text">
							安装总价：{{ item.installTotalPrice }}
						</view>
					</view>
					<view class="d-flex">
						<view class="gray_text"> 附加费用：{{ item.additionalCost||"" }} </view>
					</view>
					<view class="d-flex">
						<view class="gray_text"> 备注：{{ item.remark }} </view>
					</view>
				</view>
			</scroll-view>
			<view v-else class="none_list d-flex flex-column a-center j-center">
				<image class="none_image"
					src="https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/noneData.png" mode=""></image>
				<text>暂无数据</text>
			</view>
			<view v-if="dataList.length == searchInfo.total && dataList.length != 0" class="none_data">没有更多了哦~</view>
		</view>
		<!-- 操作菜单 -->
		<u-popup :show="showOperation" mode="bottom" round="24rpx" :closeOnClickOverlay="true" @close="close">
			<view class="operation_box">
				<view @click="exportData" class="follow">生成报价单</view>
				<view @click="viewData" class="follow">查 看</view>
				<view @click="removeData" class="remove">删 除</view>
				<view class="line"></view>
				<view @click="close">取消</view>
			</view>
		</u-popup>
		<view class="add_record_btn" @click="addData"> </view>
		<u-popup :show="showDelete" :customStyle="{ height: '316rpx' }" mode="center" round="40rpx"
			:closeOnClickOverlay="true" @close="cancelDelete">
			<view class="tip_main">
				<view class="title"> 删除 </view>
				<view class="tip_content"> 是否删除该数据? </view>
				<view class="line"> </view>
				<view class="btn_box d-flex">
					<view class="btn" @click="cancelDelete"> 取消 </view>
					<view class="btn" @click="confirmDelete"> 确定 </view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import RenCalendar from '@/components/RenCalendar.vue'
	export default {
		props: {},
		components: { RenCalendar, },
		data() {
			return {
				showDelete: false,
				yearMonth: '',
				dataList: [],
				searchInfo: {
					page: 0,
					limit: 10,
					total: 0,
					createTime: '',
				},
				opreationItem: {},
				showOperation: false,
				tipText: '',
			}
		},
		watch: {},
		created() {},
		onShow() {
			this.dataList = []
			this.searchInfo.page = 0
			if (!this.searchInfo.createTime) {
				this.searchInfo.createTime = this.$format(new Date(), 'yyyy-MM-dd')
				this.yearMonth = `${new Date().getFullYear()}-${
        new Date().getMonth() + 1
      }`
			}
			this.queryList()
		},
		mounted() {},

		methods: {
			nextPage() {
				if (this.searchInfo.total > this.dataList.length) {
					this.searchInfo.page = this.searchInfo.page + 1
					this.queryList()
				}
			},
			queryList() {
				this.$api
					.queryInstallList({ ...this.searchInfo, })
					.then(res => {
						if (res.code == 200) {
							this.dataList = this.dataList.concat(res.data.list || [])
							this.searchInfo.total = res.data.total
						} else {
							uni.showToast({
								title: '操作失败',
								icon: 'none',
							})
						}
					})
			},
			operaion(item) {
				this.opreationItem = item
				this.showOperation = true
			},
			viewData() {
				this.close()
				uni.navigateTo({ url: '/pages/index/confirmInfo?id=' + this.opreationItem._id, })
			},
			selectOne(item) {
				uni.navigateTo({ url: '/pages/index/confirmInfo?id=' + item._id, })
			},
			exportData() {
				this.close()
				uni.navigateTo({ url: '/pages/index/quotation?id=' + this.opreationItem._id, })
			},
			removeData() {
				this.close()
				this.showDelete = true
			},
			cancelDelete() {
				this.showDelete = false
			},
			confirmDelete() {
				this.$api
					.deleteInstall({ id: this.opreationItem._id, })
					.then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '删除成功',
								icon: 'none',
							})
							this.showDelete = false
							this.dataList = []
							this.searchInfo.page = 0
							this.queryList()
						} else {
							uni.showToast({
								title: res.msg || '删除失败',
								icon: 'none',
							})
						}
					})
			},
			close() {
				this.showOperation = false
			},
			onDayClick(v) {
				this.searchInfo.createTime = v.date
				this.dataList = []
				this.searchInfo.page = 0
				this.queryList()
			},
			addData() {
				uni.navigateTo({ url: '/pages/index/confirmInfo', })
			},
			changeMonth(v) {
				this.yearMonth = v
			},
		},
	}
</script>

<style scoped lang='scss'>
	.main {
		background-color: #f7f9fd;

		.top_tip {
			position: relative;
			width: 750rpx;
			height: 64rpx;
			margin-bottom: 12rpx;
			text-align: center;
			padding-left: 16rpx;
			background: #fef3eb;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #ff822f;
			line-height: 64rpx;
			box-sizing: border-box;
			animation: zoomInOut 2s infinite;
			/* 动画持续2秒，无限循环 */
		}

		@keyframes zoomInOut {

			0%,
			100% {
				transform: scale(1);
				/* 原始大小 */
			}

			50% {
				transform: scale(1.3);
				/* 放大到1.5倍 */
			}
		}

		.list_box {
			height: calc(100vh - 212rpx);
			overflow: auto;

			.data_item {
				position: relative;
				width: 718rpx;
				margin: 0 auto;
				margin-bottom: 16rpx;
				padding: 32rpx 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				box-sizing: border-box;

				.header_box {
					margin-bottom: 12rpx;

					.item_icon {
						width: 60rpx;
						height: 60rpx;
						margin-right: 12rpx;
					}

					.item_address {
						width: 436rpx;
						word-break: break-all;
						font-size: 32rpx;
						text-align: left;
						color: #222222;
						line-height: 48rpx;
						font-weight: 550;
					}
				}

				.gray_text {
					margin-right: 40rpx;
					margin-bottom: 8rpx;
					font-size: 24rpx;
					text-align: left;
					color: #999999;
					line-height: 36rpx;
				}

				.operaion_btn {
					position: absolute;
					right: 24rpx;
					top: 32rpx;
					width: 144rpx;
					height: 56rpx;
					background: rgba(64, 135, 255, 0.1);
					border-radius: 28rpx;
					font-size: 24rpx;
					text-align: center;
					color: #4087ff;
					line-height: 56rpx;
					font-weight: 550;
				}
			}

			.none_list {
				text-align: center;
				font-size: 24rpx;
				padding-top: 380rpx;
				color: #bababa;

				.none_image {
					width: 104rpx;
					height: 104rpx;
					margin-bottom: 26rpx;
				}
			}
		}
	}

	.add_record_btn {
		position: fixed;
		right: 32rpx;
		bottom: 300rpx;
		width: 128rpx;
		height: 128rpx;
		background: url("https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/student/add_record.png") no-repeat;
		background-size: 100% 100%;
		z-index: 10;
	}

	.operation_box {
		max-height: 514rpx;
		width: 100%;
		font-size: 32rpx;
		text-align: center;
		font-weight: 500;
		color: #222222;

		.follow {
			height: 108rpx;
			line-height: 108rpx;
			border-bottom: 2rpx solid #fafafa;
		}

		.remove {
			height: 107rpx;
			line-height: 107rpx;
			color: #ff6699;
		}

		.line {
			height: 16rpx;
			background-color: #f7f9fc;
		}

		&>view:last-child {
			height: 107rpx;
			padding-top: 28rpx;
			box-sizing: border-box;
			color: #999999;
		}
	}

	.tip_main {
		width: 622rpx;
		height: 316rpx;
		box-sizing: border-box;
		padding-top: 48rpx;

		.title {
			height: 44rpx;
			margin-bottom: 24rpx;
			font-size: 32rpx;
			text-align: center;
			color: #222222;
			line-height: 44rpx;
			font-weight: bold;
		}

		.tip_content {
			font-size: 28rpx;
			height: 56rpx;
			margin-bottom: 49rpx;
			text-align: center;
			color: #999999;
			line-height: 56rpx;
		}

		.line {
			width: 100%;
			height: 2rpx;
			background: #f1f1f1;
		}

		.btn_box {
			.btn {
				flex: 1;
				height: 96rpx;
				line-height: 96rpx !important;
				font-size: 32rpx;
				text-align: center;
				color: #4087ff;
				line-height: 40rpx;

				&:nth-child(1) {
					color: #323233;
					border-right: 2rpx solid #f1f1f1;
				}
			}
		}
	}

	.none_data {
		color: #999999;
		text-align: center;
		margin: 40upx 0upx;
		font-size: 20rpx;
	}
</style>